import React from 'react'
import Search from './Search'
import { getRoleApi,delRoleApi } from '../../../apis/role'
import { Space, Table, Tag,Button,Select, message } from 'antd';
import type { ColumnsType } from 'antd/es/table';
const { Option } = Select;
import AddDrawer from './AddDrawer';
import { SettingOutlined, EyeOutlined, FallOutlined,UserOutlined,HomeOutlined,PhoneOutlined,StarOutlined,LoginOutlined,FieldTimeOutlined,MailOutlined,SkinOutlined,SmileOutlined,ExclamationCircleFilled} from '@ant-design/icons';
export default function Role() {
  const [tableData, setTableData] = React.useState([])
  const [open, setOpen] = React.useState(false)
  const [title, setTitle] = React.useState('新增角色')
  //表格选中
  const [selectedRows, setSelectedRows] = React.useState([])
  const [isUpdate, setIsUpdate] = React.useState(false)
  const [roleInfo,setRoleInfo]=React.useState({})
  function getData(params?:any) {
    getRoleApi(params).then(
      res => {
        
        setTableData(res.rows)
      }
    ).catch()
  }
  React.useEffect(() => {
    getData()
  }, [])
  interface DataType {
    key: string;
    createTime: string;
    modifyTime: string;
    roleId: number;
    roleName: string;
  }
  
  const columns: ColumnsType<DataType> = [
    {
      title: '角色',
      dataIndex: 'roleName',
      key: 'roleName',
    },
    {
      title: '描述',
      dataIndex: 'remark',
      key: 'remark',
    },
    {
      title: '创建时间',
      key: 'createTime',
      dataIndex: 'createTime',
     
    },
    {
      title: '操作时间',
      key: 'roleId',
      dataIndex: 'modifyTime',
     
    },
    {
      title: '操作',
      key: 'action',
      render: (_, scoped) => (<>
        <SettingOutlined style={{ marginRight: '8px', fontSize: '16px', color: '#08c', cursor: 'pointer' }} onClick={ ()=>addRole(scoped)}/>
        <EyeOutlined style={{ fontSize: '16px', color: '#52c41a', cursor: 'pointer' }} />
      </>)
    },
  ];
  const addRole = (scoped: any) => {
    setOpen(true)
    if (scoped.roleId) {
      setTitle('编辑角色')
      setIsUpdate(true)
      setRoleInfo(scoped)
    } else {
      setTitle('新增角色')
      setIsUpdate(false)
      setRoleInfo([])
    }
  }
  const rowSelection: any = {
    onChange(_: string, value:[]) {
     setSelectedRows(value)
    }
  }
  //删除
  const delRole = () => {
    if (!selectedRows.length) {
      message.error('请选择要删除的数据')
    } else {
      selectedRows.forEach((item:any, index) => {
        delRoleApi(item.roleId).then(res => {
          message.success('删除成功')
          getData()
      }).catch()
      })
    }
  }
  return (
    <>
      <Search getData={getData} setTableData={setTableData} />
      <Button onClick={addRole} style={{ margin: '0 10px 16px 0' }}>新增</Button>
      <Button onClick={delRole} style={{ marginRight: '10px' }}>删除</Button>
      <Select
      value={'更多操作'}
      style={{ width: 100 }}
      
      options={[
        {
          value: '0',
          label: '密码重置',
        },
        {
          value: '1',
          label: '导出Excel',
        },
      ]}
      />
      <Table columns={columns} dataSource={tableData} pagination={false}
        rowKey="roleId"
        rowSelection={rowSelection}
      />
      <AddDrawer open={open} title={title} setOpen={setOpen} isUpdate={isUpdate}
        roleInfo={roleInfo}
        setRoleInfo={setRoleInfo}
        getData={getData}
      />
    </>
  )
}
